<template>
  <div id="test" v-loading="loading">


      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign"  disabled class="weizhi2">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username" style="width: 200px;outline:none" ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="formLabelAlign.realName" style="width: 200px;outline:none"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" style="width: 200px;outline:none"></el-input>
        </el-form-item>
      </el-form>
    <el-button type="danger" @click="dialogFormVisible = true" class="weizhi2">修改信息</el-button>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" append-to-body=true >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth" >
          <el-input v-model="form.username" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realName" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="correct()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loading:true,
      bb:null,
      labelPosition: 'left',
      dialogFormVisible: false,
      form: {
        username: '',
        realName: '',
        password: '',

      },
      formLabelWidth: '200px',
      formLabelAlign: {
        username: '',
        realName: '',
        password: ''
      }
    };
  },
  methods: {
    correct(){
      const _this = this;
      if (_this.form.username != "" && _this.form.password != "") {
        axios({
          method: "post",
          url: _this.APIurl.apiUrl.domainName+"user/modify",
          headers: {
            "Content-Type": "application/json",
          },
          data:{
            id:sessionStorage.getItem('id'),
            username: _this.form.username,
            password: _this.form.password,
            realName:_this.form.realName
          }
        })
            .then(function(resp) {
              switch(resp.data.code){
                case 1:
                  sessionStorage.setItem('id',resp.data.data.id);
                  sessionStorage.setItem('user', JSON.stringify(resp.data.data));
                  _this.dialogFormVisible = false
                  _this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                  });

                  break;
                case 0:
                  _this.usernameError = true;
                  break;
                case -1:
                  _this.passwordError = true;
                  break;
              }
            })
            .catch(function(error) {
              console.log(error);
            });

      }
    }

  },
  created() {
    var aa=JSON.parse(sessionStorage.getItem("user"));
    this.formLabelAlign.username=aa.username;
    this.formLabelAlign.realName=aa.realName;
    this.formLabelAlign.password=aa.password;
    this.loading=false
  }
}


</script>

<style scoped>
#test {
  background: url("../assets/background.jpg" ) no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.weizhi2{
  z-index: 999;
  position: relative;
  top: 30%;
  left: 10%;
}

</style>
